<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* flex布局 */
       .flex__container {
            display: flex; 
            /* // 或 inline-flex */
        }
        .flex_item {
            background-color: violet;
            flex:1;
            border:1px solid #f00;
        }
        /* Grid布局 */
        .grid__container {
            display: grid;
            /* grid-template-columns: 20vw 1fr 20vw; 根据需求调整值 */
            grid-auto-flow: column;
        }
    </style>
</head>
<body>
    <!-- Flexbox -->
    <!-- <flex__container>
        <flex__item></flex__item>
        <flex__item></flex__item>
        <flex__item></flex__item>
    </flex__container> -->
    <div class="flex__container">
        <div class="flex_item">navsection</div>
        <div class="flex_item">navsection</div>
        <div class="flex_item">navsection</div>
    </div>
<!--            
        <grid__container>
            <grid__item></grid__item>
            <grid__item></grid__item>
            <grid__item></grid__item>
        </grid__container> -->
        <div class="grid__container">
            <div class="flex_item">navsection</div>
            <div class="flex_item">navsection</div>
            <div class="flex_item">navsection</div>
        </div>

</body>
</html>